import React, { useState, useEffect } from 'react';
import { CalendarOutlined, FundOutlined, FileTextOutlined } from '@ant-design/icons';
import { BookOutlined, FileFilled, FundProjectionScreenOutlined } from '@ant-design/icons';
import { Row, Col, Card, Select, Divider } from 'antd';
import ECharts from 'echarts-for-react';


import styles from './index.less';
import image00 from './img/162639.png';
import image01 from './img/01.png';
import image02 from './img/02.png';
import image03 from './img/03.png';
import image04 from './img/04.png';
import image05 from './img/05.png';
import image06 from './img/06.png';
import image07 from './img/07.png';
import image08 from './img/08.png';
import image09 from './img/09.png';
import image10 from './img/10.png';
import classNames from 'classnames';

const { Option } = Select;
const { Meta } = Card;

const overview: React.FC = (props) => {

  const option2 = {
    color: ["#b79fdb", "#2ccacb"],
    grid: {
      top: 50,
      left: 30,
      right: 50,
      bottom: 30
    },
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['昨日', '今日'],
      textStyle: {
        color: '#ddd',
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd',//左边线的颜色
        }
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#ddd',//左边线的颜色
        }
      },
    },
    series: [
      {
        name: '昨日',
        type: 'line',
        smooth: true,
        data: [10, 11, 13, 11, 12, 12, 80, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        markPoint: {
          data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
          ]
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ]
        }
      },
      {
        name: '今日',
        type: 'line',
        smooth: true,
        data: [10, 20, 15, 50, 23, 25, 60, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        markPoint: {
          data: [
            { name: '日最低', value: -2, xAxis: 1, yAxis: -1.5 }
          ]
        },
        markLine: {
          data: [
            { type: 'average', name: '平均值' },
            [{
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            }, {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: '最大值'
              },
              type: 'max',
              name: '最高点'
            }]
          ]
        }
      }
    ]
  };

  const [option, setOption] = useState(option2);

  useEffect(() => {

  }, []);

  return (
    <>
      <Row gutter={[16, 16]} className={styles.Container}>
        <Col span={8}>
          <Card title={<div><CalendarOutlined />&nbsp;概况</div>} style={{ height: 400 }}
            extra={<Select style={{ width: 120 }} size={'small'} placeholder='车间选择'>
              <Option value="db">东北角一车间</Option>
              <Option value="xb">西北角二车间</Option>
            </Select>}>
            <Row style={{ width: '100%', height: '120px', paddingTop: '16px' }}>
              <Col span={16} style={{ fontSize: '18px', textAlign: 'center', padding: '40px 0', backgroundColor: '#365fb9' }}>设备总数</Col>
              <Col span={8} style={{ fontSize: '18px', textAlign: 'center', padding: '40px 0', backgroundColor: '#4377dd' }} >679</Col>
            </Row>
            <Row gutter={[32, 32]} style={{ paddingTop: '32px' }}>
              <Col span={8}>
                <Card
                  style={{ width: '100%', backgroundColor: '#4377dd' }}
                  cover={<img alt="example" src={image00} height='130px' />}
                >
                  <Meta title="30" />
                </Card>
              </Col>
              <Col span={8}><Card
                style={{ width: '100%', backgroundColor: '#4377dd' }}
                cover={<img alt="example" src={image00} height='130px' />}
              >
                <Meta title="30" />
              </Card></Col>
              <Col span={8}><Card
                style={{ width: '100%', backgroundColor: '#4377dd' }}
                cover={<img alt="example" src={image00} height='130px' />}
              >
                <Meta title="30" />
              </Card></Col>
            </Row>
          </Card>
        </Col>
        <Col span={8}>
          <Card title={<div><FundOutlined />&nbsp;运行状态</div>} style={{ height: 400 }}
            extra={'2021-10-28 14:58:56'}
          >
            <Row gutter={[10, 10]}>
              <Col span={6} className={styles.fund}>
                <Card
                  style={{ width: '100%' }}
                  cover={<div style={{textAlign: 'center', marginTop: '15px'}}><img alt="example" src={image02} height='60px' width='60px' /></div>}
                >
                  <Meta title={<div style={{ fontSize: '14px' }}>正常设备</div>} description={<div style={{ fontSize: '28px', color: '#fff' }}>679</div>} />
                </Card>
              </Col>
              <Col span={6} className={styles.fund}>
                <Card
                  style={{ width: '100%' }}
                  cover={<div style={{textAlign: 'center', marginTop: '15px'}}><img alt="example" src={image03} height='60px' width='60px' /></div>}
                >
                  <Meta title={<div style={{ fontSize: '14px' }}>报警设备</div>} description={<div style={{ fontSize: '28px', color: '#fff' }}>3</div>} />
                </Card>
              </Col>
              <Col span={6} className={styles.fund}>
                <Card
                  style={{ width: '100%' }}
                  cover={<div style={{textAlign: 'center', marginTop: '15px'}}><img alt="example" src={image03} height='60px' width='60px' /></div>}
                >
                  <Meta title={<div style={{ fontSize: '14px' }}>故障设备</div>} description={<div style={{ fontSize: '28px', color: '#fff' }}>3</div>} />
                </Card>
              </Col>
              <Col span={6} className={styles.fund}>
                <Card
                  style={{ width: '100%' }}
                  cover={<div style={{textAlign: 'center', marginTop: '15px'}}><img alt="example" src={image04} height='60px' width='60px' /></div>}
                >
                  <Meta title={<div style={{ fontSize: '14px' }}>离线设备</div>} description={<div style={{ fontSize: '28px', color: '#fff' }}>5</div>} />
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={{ width: '100%', backgroundColor: '#4377dd' }}
                  cover={
                    <div style={{ textAlign: 'center', backgroundColor: '#2e58ae' }}>
                      <img alt="example" src={image07} height='40px' width='57px' style={{margin: '30px auto'}} />
                    </div>}
                >
                  <Meta title="过载0.01%" />
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={{ width: '100%', backgroundColor: '#4377dd' }}
                  cover={
                    <div style={{ textAlign: 'center', backgroundColor: '#2e58ae' }}>
                      <img alt="example" src={image08} height='40px' width='57px' style={{margin: '30px auto'}} />
                    </div>}
                >
                  <Meta title="不平衡0.0%" />
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={{ width: '100%', backgroundColor: '#4377dd' }}
                  cover={
                    <div style={{ textAlign: 'center', backgroundColor: '#2e58ae' }}>
                      <img alt="example" src={image09} height='40px' width='57px' style={{margin: '30px auto'}} />
                    </div>}
                >
                  <Meta title="断相0.0%" />
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={{ width: '100%', backgroundColor: '#4377dd' }}
                  cover={
                    <div style={{ textAlign: 'center', backgroundColor: '#2e58ae' }}>
                      <img alt="example" src={image10} height='40px' width='57px' style={{margin: '30px auto'}} />
                    </div>}
                >
                  <Meta title="短路0.0%" />
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col span={8}>
          <Row gutter={[0, 16]}>
            <Col span={24}>
              <Card title={<div><BookOutlined />&nbsp;当日报警记录</div>} style={{ height: 200 }}>
                <Row gutter={[16, 0]}>
                  <Col span={8}>
                    <Card
                      style={{ width: '100%', backgroundColor: '#4377dd' }}
                      cover={<div style={{ height: '80px', backgroundColor: '#5ec1f8', fontSize: '18px', textAlign: 'center', padding: '30px 0' }}>低报警</div>}
                    >
                      <Meta title="0次" />
                    </Card>
                  </Col>
                  <Col span={8}>
                    <Card
                      style={{ width: '100%', backgroundColor: '#4377dd' }}
                      cover={<div style={{ height: '80px', backgroundColor: '#f4b766', fontSize: '18px', textAlign: 'center', padding: '30px 0' }}>中报警</div>}
                    >
                      <Meta title="0次" />
                    </Card>
                  </Col>
                  <Col span={8}>
                    <Card
                      style={{ width: '100%', backgroundColor: '#4377dd' }}
                      cover={<div style={{ height: '80px', backgroundColor: '#fd6864', fontSize: '18px', textAlign: 'center', padding: '30px 0' }}>高报警</div>}
                    >
                      <Meta title="2次" />
                    </Card>
                  </Col>
                </Row>
              </Card>
            </Col>
            <Col span={24}>
              <Card title={<div><FileFilled />&nbsp;近期巡检记录</div>} style={{ height: 184 }}>
                <Row>
                  <Col span={18}>
                    <div style={{fontSize: '15px', margin: '6px 0'}}>巡检时间：2021-08-30 21:30</div>
                    <div style={{fontSize: '15px', margin: '6px 0'}}>巡检项数：30项</div>
                    <div style={{fontSize: '15px', margin: '6px 0'}}>缺陷项：15项</div>
                    <div style={{fontSize: '15px', margin: '6px 0'}}>巡检人员：张东升</div>
                  </Col>
                  <Col span={6}>
                    <div className={styles.filled}>50%</div>
                  </Col>
                </Row>
              </Card>
            </Col>
          </Row>
        </Col>
        <Col span={16}>
          <Card title={<div><FundProjectionScreenOutlined />&nbsp;当日用电量</div>} style={{ height: 360 }}
            extra={<div><span style={{ padding: '3px 5px', backgroundColor: '#4377dc', borderRadius: '2px' }}>分时段</span>&nbsp;|&nbsp;<span style={{ padding: '3px 5px' }}>总用量</span></div>}
          >
            <ECharts option={option2} style={{ height: 300, width: '100%' }} />
          </Card>
        </Col>
        <Col span={8}>
          <Card title={<div><FileTextOutlined />&nbsp;用电概况</div>} style={{ height: 360 }}
            extra={<div><span style={{ padding: '3px 5px', backgroundColor: '#4377dc', borderRadius: '2px' }}>日</span>&nbsp;|&nbsp;<span style={{ padding: '3px 5px' }}>月</span>&nbsp;|&nbsp;<span style={{ padding: '3px 5px' }}>年</span></div>}
          >
            <Row gutter={[16, 16]} style={{ width: '100%', paddingTop: '16px' }}>
              <Col span={24}>
                <div className={styles.lined}>
                  <span style={{ paddingLeft: '10%' }}>当日用电</span><span style={{ paddingLeft: '20%' }}>2558.8 KM·h</span>
                </div>
              </Col>
              <Col span={24}>
                <div className={styles.lined}>
                  <span style={{ paddingLeft: '10%' }}>昨日同期</span><span style={{ paddingLeft: '20%' }}>2651.2 KM·h</span>
                </div>
              </Col>
              <Col span={24}>
                <div className={styles.lined}>
                  <span style={{ paddingLeft: '12%' }}>环比</span><span style={{ paddingLeft: '25%' }}>-3.49%</span>
                </div>
              </Col>
              <Col span={24}>
                <div style={{ backgroundColor: '#4377dd', lineHeight: '50px', height: '50px', fontSize: '18px', textAlign: 'center' }}>
                  <span style={{ display: 'inline-block', width: '50%' }}>11:15-11:30</span>
                  <span style={{ display: 'inline-block', width: '50%' }} >371.2KW</span>
                </div>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </>
  );
};

export default overview;